<script setup lang="ts">
import { ref } from 'vue';

const aboutLinks = ref([
  { id: 1, name: '公司简介' },
  { id: 2, name: '联系我们' },
  { id: 3, name: '加入我们' },
  { id: 4, name: '用户协议' }
]);

const hotDestinations = ref([
  { id: 1, name: '马尔代夫' },
  { id: 2, name: '日本' },
  { id: 3, name: '泰国' },
  { id: 4, name: '欧洲' }
]);
</script>

<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-sections">
        <div class="footer-section">
          <h3>关于我们</h3>
          <p class="footer-desc">我们致力于为旅游爱好者提供最好的旅游服务，让每一次旅行都成为美好的回忆。</p>
        </div>
        
        <div class="footer-section">
          <h3>联系方式</h3>
          <div class="contact-item">
            <span class="contact-icon">📞</span>
            <span>400-888-8888</span>
          </div>
          <div class="contact-item">
            <span class="contact-icon">✉️</span>
            <span>service@travel.com</span>
          </div>
          <div class="contact-item">
            <span class="contact-icon">📍</span>
            <span>北京市朝阳区建国路88号</span>
          </div>
        </div>
        
        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="social-links">
            <a href="#" class="social-link">
              <span class="social-icon">📱</span>
            </a>
            <a href="#" class="social-link">
              <span class="social-icon">🌐</span>
            </a>
            <a href="#" class="social-link">
              <span class="social-icon">📷</span>
            </a>
          </div>
        </div>
        
        <div class="footer-section">
          <h3>快速链接</h3>
          <div class="quick-links">
            <a href="#" class="quick-link">帮助中心</a>
            <a href="#" class="quick-link">隐私政策</a>
            <a href="#" class="quick-link">服务条款</a>
            <a href="#" class="quick-link">常见问题</a>
          </div>
        </div>
      </div>
      
      <div class="copyright">
        © 2025 Travel Website. All rights reserved.
      </div>
    </div>
  </footer>
</template>

<style scoped>
.footer {
  background-color: #1a2b3c;
  color: white;
  padding: 50px 0 20px;
  margin-top: 50px;
}

.footer-sections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
}

.footer-section h3:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #0066cc;
}

.footer-desc {
  color: #ccc;
  line-height: 1.6;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #ccc;
}

.contact-icon {
  margin-right: 10px;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background-color 0.2s;
}

.social-link:hover {
  background-color: #0066cc;
}

.quick-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-link {
  color: #ccc;
  transition: color 0.2s;
}

.quick-link:hover {
  color: white;
}

.copyright {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #999;
  font-size: 14px;
}
</style>